<template>
  <div class="articles-add">
<<<<<<< HEAD
    <el-dialog
      :title="titleInfo.text + titleInfo.pageTitle"
      :visible.sync="addDialogFormVisible"
    >
      <el-form
        :rules="ruleInline"
        :model="articlesAddInfo"
        label-width="80px"
        style="width: 100%;"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="articlesAddInfo.title"
            placeholder="请输入文章标签"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <!-- 富文本编辑器组件 -->
          <quill-editor
            class="quill-editor"
            v-model="articlesAddInfo.articleBody"
            :options="editorOption"
          ></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input
            class="video"
            v-model="articlesAddInfo.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
=======
    <el-dialog :title="titleInfo.text + titleInfo.pageTitle" :visible.sync="addDialogVisible">
      <el-form :rules="ruleInline" ref="dataForm" :model="articlesAddForm" label-width="80px" style="width: 100%;">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="articlesAddForm.title" placeholder="请输入文章标签"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <!-- 富文本编辑器组件 -->
          <quill-editor class="quill-editor" v-model="articlesAddForm.articleBody" :options="editorOption"></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input class="video" v-model="articlesAddForm.videoURL" placeholder="请输入视频地址"></el-input>
>>>>>>> 99b581ad90efc8af6413e4097d13ec8f4855db58
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClosed">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="createData">{{
          $t('table.confirm')
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { add, update } from '@/api/hmmm/articles'

export default {
  name: 'ArticlesAdd',
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    articlesAddForm: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 控制新增技巧对话框的显示与隐藏
      addDialogVisible: false,
      // 表单验证
      ruleInline: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'change' }
        ]
      }, // 富文本编辑器
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], //列表
            ['blockquote'], //引用，
            ['code-block', 'image', 'link'] //代码块,上传图片、上传视频
          ]
        }
      }
    }
  },
  computed: {},
  methods: {
    // 对话框显示
    dialogShow() {
      this.addDialogVisible = true
    },
    // 对话框隐藏
    dialogClosed() {
      this.addDialogVisible = false
    },

    // 表单提交
    createData() {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          this.dialogClosed()
          if (this.articlesAddForm.id) {
             await update(this.articlesAddForm)
            // console.log(res)
            this.$emit('articlesAddDatas')
          } else {
            await add(this.articlesAddForm)
            this.$emit('articlesAddDatas')
          }
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    }
  },
  // 创建完毕状态
  created() {}
}
</script>
<style lang="less" scoped>
.articles-add {
  /deep/ .quill-editor {
    .ql-editor {
      height: 200px;
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
